<template>
  <ul
    v-show="isShow"
    class="calendar-menu"
    :style="`top: ${position.y - 15}px; left: ${position.x - 5}px`"
  >
    <li
      class="calendar-menu__item"
      @click="clickHandle(item.eventName)"
      v-for="item in eventList"
      :key="`menu-item_${item.eventName}`"
    >
      <span>{{ item.label }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'CalendarMenu',
  props: {
    position: {
      type: Object,
      default: () => {
        return {
          x: 0,
          y: 0,
        }
      },
    },
    isShow: {
      type: Boolean,
      dafault: false,
    },
  },
  data() {
    return {
      eventList: [
        {
          eventName: 'clear',
          label: '清空',
        },
        {
          eventName: 'edit',
          label: '编辑',
        },
      ],
    }
  },
  methods: {
    clickHandle(eventName) {
      this.$emit('clickEvent', eventName)
    },
  },
}
</script>

<style lang="scss" scoped>
.calendar-menu {
  position: absolute;
  width: 80px;
  border: 1px solid #333;
  padding: 0;
  background-color: #ffffff;
  &__item {
    list-style: none;
    padding: 5px;
    margin: 0;
    border-bottom: 1px solid #000;
    text-align: center;
    cursor: pointer;
    user-select: none;
    &:last-child {
      border-bottom: none;
    }
    &:hover {
      background-color: #333;
      color: #fff;
    }
  }
}
</style>
